﻿<template>
	<div class="list">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(item,index) in imgArr" :key="index"><img :src="item.src" /></swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	const imgArr = [{
		src: 'static/img/share_img.jpg' //src:'static/img/share_img.png'
	}, {
		src: 'static/img/event_img.jpg'
	}, {
		src: 'static/img/family_img.jpg'
	}, {
		src: 'static/img/active_img.jpg'
	}];
	export default {
		name: 'swipeList',
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				swiperOption: {
					slidesPerView: 4,
					spaceBetween: 10,
				},
				imgArr: imgArr
			}
		}
	}
</script>

<style lang='scss'>
	.list {
		width: 100%;
		left: 0;
		top: 790px;
		height: 222px;
		margin-bottom: -16px;
		img {
			height: 210px;
			left: 0;
			width: 100%;
		}
	}
</style>